<template>
  <div class="user">
    <el-input
      placeholder="搜索手机号"
      v-model="selectInput"
      clearable
      class="select"
      @change="select(selectInput)"
    ></el-input>
    <el-button
      icon="el-icon-search"
      circle
      @click="select(selectInput)"
    ></el-button>
    <el-table :data="tableData.records" style="width: 100%" :height="450">
      <el-table-column prop="id" label="id" width="180"> </el-table-column>
      <el-table-column label="头像" width="100">
        <div slot-scope="scope" class="avatar">
          <el-avatar
            fit="contain"
            :src="'/api/file/downloadAvatar?t=' + scope.row.avatar"
          ></el-avatar>
          <!-- <img :src="'/api/file/downloadAvatar?t=' + scope.row.avatar" alt="" /> -->
        </div>
      </el-table-column>
      <el-table-column prop="name" label="昵称" width="180"></el-table-column>
      <el-table-column prop="phone" label="电话" width="120"></el-table-column>
      <el-table-column prop="sex" label="性别" width="50">
        <template slot-scope="scope">
          {{ scope.row.sex == 1 ? "男" : "女" }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="4"
      :current-page="1"
      :total="total"
      style="text-align: center; margin-top: 20px"
      @current-change="changeIndex"
    >
    </el-pagination>
    <el-dialog
      :title="isChange ? '修改用户' : '添加用户'"
      :visible="centerDialogVisible"
      width="30%"
      close-on-press-escape
      :show-close="false"
      close-on-click-modal
      modal
      center
    >
      <div class="form">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="昵称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="change()">{{
          isChange ? "修 改" : "添 加"
        }}</el-button>
      </span>
    </el-dialog>
    <el-dialog title="删除" :visible.sync="deleteVisible" width="30%">
      <span>确定删除该用户</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkDelete()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CatcoffeeUser",
  data() {
    return {
      centerDialogVisible: false,
      selectInput: "",
      tableData: [],
      form: {},
      isChange: false,
      deletePointer: "",
      deleteVisible: false,
      total: 1,
    };
  },

  mounted() {
    this.select();
  },

  methods: {
    handleEdit(index, row) {
      this.isChange = true;
      this.centerDialogVisible = true;
    },
    handleDelete(index, row) {
      this.deleteVisible = true;
      this.deletePointer = row.username;
    },
    add() {
      this.centerDialogVisible = true;
      this.form = { sex: 1 };
      this.select();
    },
    select(phone) {
      this.$store.commit("setIsLoad", true);
      this.$axios
        .get(
          "/user/select?page=1&pageSize=4" +
            (phone == undefined ? "" : "&phone=" + phone)
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.total = res.data.data.total;
            this.tableData = res.data.data;
          } else {
            this.$notify.error({
              title: "错误",
              message: "查询失败，未登录",
            });
          }
          this.$store.commit("setIsLoad", false);
        });
    },
    change() {
      this.$store.commit("setIsLoad", true);
      if (this.isChange) {
        this.$axios.post("/user/register", this.form).then((res) => {
          this.$notify.success({
            title: "成功",
            message: "修改成功！！！",
          });
        });
        this.centerDialogVisible = false;
      } else {
        this.$axios.post("/user/register", this.form).then((res) => {
          this.$notify.success({
            title: "成功",
            message: "添加成功！！！",
          });
        });
        this.centerDialogVisible = false;
      }
      this.select();
      this.$store.commit("setIsLoad", false);
    },
    checkDelete() {
      this.deleteVisible = false;
      this.$store.commit("setIsLoad", true);
      this.$axios
        .get("/user/delete?username=" + this.deletePointer)
        .then((res) => {
          this.$notify.success({
            title: "成功",
            message: "删除成功",
          });
          this.$store.commit("setIsLoad", false);
          this.select();
        });
    },
    changeIndex(page) {
      console.log(page);
      this.$store.commit("setIsLoad", true);
      this.$axios
        .get("/user/select?page=" + page + "&pageSize=4")
        .then((res) => {
          this.tableData = res.data.data;
          this.$store.commit("setIsLoad", false);
        });
    },
  },
};
</script>

<style scoped>
.select {
  width: 200px;
  margin: 0 10px 0 10px;
}
.user {
  padding: 20px;
}
</style>